<template>
	<view class="userInfoContainer">
		<!-- 头像昵称区 -->
		<view class="avatarContainer">
			<image :src="userInfo.avatarUrl" class="avatar"></image> <view class="nickname">{{ userInfo.nickname }}</view>
		</view>

		<!-- 功能面板区 -->
		<view class="panelContainer">
			<!-- 收藏导航 -->
			<view class="favContainer">
				<view class="fav-item" v-for="item in favArr" :key="item.icon" @click="favClick">
					<uni-icons custom-prefix="iconfont" :type="item.icon" size="24"></uni-icons>
					<text>{{ item.name }}</text>
				</view>
			</view>

			<!-- 我的订单 -->
			<view class="ordersContainer">
				<!-- 标题栏 -->
				<view class="orderTitle">
					<text class="left">我的订单</text>
					<view @click="ordersClick"> 全部 <uni-icons type="forward" size="13"></uni-icons> </view>
				</view>
				<!-- 内容区 -->
				<view class="ordersContent">
					<view class="orders-item" v-for="item in ordersArr" :key="item.icon" @click="ordersClick">
						<uni-icons custom-prefix="iconfont" :type="item.icon" size="24"></uni-icons>
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>

			<!-- 选项设置 -->
			<view class="optionsContainer">
				<view class="options-item" v-for="item in optionsArr" :key="item.icon" @click="optionsClick(item.name)">
					<!-- 选项左侧 -->
					<view>
						<uni-icons custom-prefix="iconfont" :type="item.icon" size="16"></uni-icons>
						<text>{{ item.name }}</text>
					</view>
					<!-- 选项右侧 -->
					<view><uni-icons type="forward" size="18"></uni-icons> </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
	name: 'my-userinfo',
	data() {
		return {
			favArr: [
				{
					name: '收藏',
					icon: 'icon-shoucang'
				},
				{
					name: '订阅店铺',
					icon: 'icon-dianpu'
				},
				{
					name: '足迹',
					icon: 'icon-lishijilu'
				},
				{
					name: '评论',
					icon: 'icon-pinglun'
				}
			],
			ordersArr: [
				{
					name: '待付款',
					icon: 'icon-daifukuan01'
				},
				{
					name: '待发货',
					icon: 'icon-daifahuo'
				},
				{
					name: '待收货',
					icon: 'icon-daishouhuo'
				},
				{
					name: '待评价',
					icon: 'icon-daipingjia'
				},
				{
					name: '退款/售后',
					icon: 'icon-tuikuan'
				}
			],
			optionsArr: [
				{
					name: '收货地址',
					icon: 'icon-shouhuodizhi'
				},
				{
					name: '联系客服',
					icon: 'icon-kefu'
				},
				{
					name: '退出登录',
					icon: 'icon-tuichudenglu'
				}
			]
		}
	},
	computed: {
		...mapState('m_user', ['userInfo'])
	},
	methods: {
		...mapMutations('m_user', ['updateSelected', 'updateToken', 'updateUserInfo']),

		// 定义收藏区点击事件
		favClick() {
			uni.$showMsg('此功能暂未开发！')
		},

		// 定义我的订单“全部”按钮以及内容区的点击事件
		ordersClick() {
			uni.$showMsg('此功能暂未开发！')
		},

		// 监听选项设置的点击事件
		async optionsClick(name) {
			// 收货地址
			if (name === '收货地址') {
				uni.$showMsg('此功能暂未开发！')
			}
			// 联系客服
			if (name === '联系客服') {
				uni.$showMsg('此功能暂未开发！')
			}
			// 退出登录项
			if (name === '退出登录') {
				const [err, res] = await uni.showModal({
					content: '是否确定退出登录？'
				})
				if (err || res.cancel) return
				if (res.confirm) {
					// 清空用户的token、userInfo、selectedAddress
					this.updateSelected({})
					this.updateToken({ token: '' })
					this.updateUserInfo({})
				}
			}
		}
	}
}
</script>

<style lang="scss">
.userInfoContainer {
	height: 100%;
	background-color: #f4f4f4;
	// 头像昵称区
	.avatarContainer {
		height: 400rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #c00000;
		// background-image: linear-gradient(to top right, #c00000, rgba(194, 11, 11, 0.5), #fff);
		// 头像
		.avatar {
			width: 90px;
			height: 90px;
			border-radius: 45px;
			border: 2px solid white;
			box-shadow: 0 1px 5px black;
			background-color: #dfdfdf;
		}
		// 昵称
		.nickname {
			margin-top: 10px;
			font-weight: 700;
			font-size: 16px;
			color: #fff;
		}
	}
	// 功能面板区
	.panelContainer {
		padding: 0 10px;
		position: relative;
		top: -10px;
		// 每个面板统一外观样式
		.favContainer,
		.ordersContainer,
		.optionsContainer {
			padding: 10px;
			margin-bottom: 10px;
			border-radius: 10px;
			background-color: #fff;
			display: flex;
		}
		// 收藏导航
		.favContainer {
			justify-content: space-around;
			align-items: center;
			.fav-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				uni-icons {
					margin-bottom: 5px;
				}
			}
		}
		// 我的订单
		.ordersContainer {
			flex-direction: column;
			justify-content: space-around;
			font-size: 14px;
			// 标题栏
			.orderTitle {
				margin-bottom: 12px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left {
					font-weight: 700;
				}
			}
			// 内容区
			.ordersContent {
				display: flex;
				justify-content: space-around;
				align-items: center;
				.orders-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					uni-icons {
						margin-bottom: 5px;
					}
				}
			}
		}
		// 选项设置
		.optionsContainer {
			padding: 0 10px;
			flex-direction: column;
			font-size: 16px;
			.options-item {
				padding: 12px 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				uni-icons {
					margin-right: 5px;
				}
			}
		}
	}
}
</style>
